<!--
 * @Author: yehongbo 1394168736@qq.com
 * @Date: 2024-02-20 17:05:38
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-02-21 10:58:52
 * @FilePath: \giteeDownload\testthree\src\views\test7.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- <div id="container">
  </div> -->
</template>

<script setup>
import * as THREE from 'three'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';


// 实例化一个gui对象
const gui = new GUI();
//改变交互界面style属性
gui.domElement.style.right = '0px';
gui.domElement.style.width = '300px';

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 5);

// 创建光源
const light = new THREE.AmbientLight(0xffffff);
scene.add(light);

const texture = new THREE.TextureLoader().load(`static/all.jpg`);
const spriteMaterial = new THREE.SpriteMaterial({
  map: texture,
});

let stop = false

const group = new THREE.Group();
for (let i = 0; i < 16000; i++) {
  // 精灵模型共享材质
  const sprite = new THREE.Sprite(spriteMaterial);
  group.add(sprite);
  sprite.scale.set(1, 1, 1);
  // 设置精灵模型位置，在长方体空间上上随机分布
  const x = 1000 * (Math.random() - 0.5);
  const y = 600 * Math.random();
  const z = 1000 * (Math.random() - 0.5);
  sprite.position.set(x, y, z)
}
const clock = new THREE.Clock();
let objs = {
  ys: 10
}
function loop() {
  // loop()两次执行时间间隔
  const t = clock.getDelta();
  group.children.forEach(sprite => {
    // 雨滴的y坐标每次减t*60
    if (!stop) {
      // sprite.position.y -= t * 60;
      sprite.position.y -= objs.ys;
      if (sprite.position.y < 0) {
        sprite.position.y = 600;
      }
    }

  });
  requestAnimationFrame(loop);
}

gui.add(objs, 'ys', 0, 1000).name('速度').step(10)

loop();
// const camera = new THREE.PerspectiveCamera(30, width / height, 50, 3000);

scene.add(group)
// window.addEventListener('click', function () {
//   stop = !stop
// })

// 渲染场景
function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);

// // 改变相机观察目标点 camera.lookAt(250, 0, 250);
// 意相机控件OrbitControls会影响lookAt设置，注意手动设置OrbitControls的目标参数
controls.target.set(250, 0, 250)
controls.update()
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {
  // 浏览器控制台查看相机位置变化
  // console.log('camera.position', camera.position);
  // 渲染循环和相机控件OrbitControls

  // 设置了渲染循环, 相机控件OrbitControls就不用再通过事件change执行renderer.render(scene, camera);，毕竟渲染循环一直在执行renderer.render(scene, camera);。
  // renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件



</script>
<style scoped>
#container {
  width: 500px;
  height: 500px;
  margin: 100px auto;
  background: gray;
}
</style>